<template>
  <el-row>
    <el-card>
      <el-descriptions :title="companyData.companyName">
        <el-descriptions-item
          v-for="item in companyLabel"
          :key="item.model"
          :label="item.label"
        >
          {{ companyData[item.model] }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card>
      <ul>
        <li v-for="item in roleList" :key="item.roleName">
          {{ item.roleName }} - {{ item.roleType }}
        </li>
      </ul>
    </el-card>
    <el-card>
      <el-input placeholder="输入关键字进行过滤" v-model="filterText">
      </el-input>
      <el-tree
        class="filter-tree"
        :data="companyMenuList"
        :props="defaultProps"
        show-checkbox
        default-expand-all
        node-key="id"
        :default-checked-keys="checkedKeys"
        :filter-node-method="filterNode"
        ref="tree"
      >
      </el-tree>
    </el-card>
  </el-row>
</template>

<script>
import { loopChildren } from '@/utils/common'

export default {
  created () {
    this.getCompanyInfo()
  },
  computed: {
    id () {
      return this.$route.query.id
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    // 获取企业详情
    getCompanyInfo () {
      const params = {
        id: this.id
      }
      this.$api.companyInfo(params).then(res => {
        // console.log(res)
        const {
          id,
          companyNo,
          companyName,
          creditCode,
          isRelCom,
          companyType,
          companyAdd,
          wheelNo,
          wheelName,
          phoneNo,
          cellPhoneNo,
          isValid
        } = res
        this.companyData = {
          id,
          companyNo,
          companyName,
          creditCode,
          isRelCom,
          companyType,
          companyAdd,
          wheelNo,
          wheelName,
          phoneNo,
          cellPhoneNo,
          isValid
        }
        this.getRoleCompanyList(companyNo)
        this.getCompanyMenuTree(companyNo)
      })
    },
    // 获取企业角色列表
    getRoleCompanyList (companyNo) {
      this.$api.roleCompanyList({ companyNo }).then(res => {
        // console.log(res.list)
        this.roleList = res.list.map(item => {
          const { roleName, roleType } = item
          return { roleName, roleType }
        })
      })
    },
    getCompanyMenuTree (companyNo) {
      this.$api.companyMenuTree({ companyNo }).then(res => {
        this.companyMenuList = res
        console.log(res)
        loopChildren(res, item => {
          const { isShow } = item
          if (isShow) {
            // console.log(item)
            this.checkedKeys.push(item.id)
          }
        })
      })
    },
    filterNode (value, data) {
      if (!value) return true
      return data[this.defaultProps.label].indexOf(value) !== -1
    }
  },
  data () {
    return {
      companyData: {
        id: '',
        // 企业平台编号
        companyNo: '',
        // 企业名称
        companyName: '',
        // 社会信用号
        creditCode: '',
        // 是否关联公司
        isRelCom: '',
        // 公司类型
        companyType: '',
        // 公司地址
        companyAdd: '',
        // 负责人编号
        wheelNo: '',
        // 负责人名称
        wheelName: '',
        // 座机号码
        phoneNo: '',
        // 手机号码
        cellPhoneNo: '',
        // 是否有效
        isValid: ''
      },
      companyLabel: [
        { model: 'companyNo', label: '企业平台编号' },
        { model: 'creditCode', label: '社会信用号' },
        { model: 'isRelCom', label: '是否关联公司' },
        { model: 'companyType', label: '公司类型' },
        { model: 'companyAdd', label: '公司地址' },
        { model: 'wheelNo', label: '负责人编号' },
        { model: 'wheelName', label: '负责人名称' },
        { model: 'phoneNo', label: '座机号码' },
        { model: 'cellPhoneNo', label: '手机号码' },
        { model: 'isValid', label: '是否有效' }
      ],
      roleList: [],
      filterText: '',
      companyMenuList: [],
      checkedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'menuName'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions {
  .el-descriptions__header {
    justify-content: center;
  }
}
</style>
